<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../public/css/style-wap.css">
		<link rel="stylesheet" href="../public/css/public-wap.css">
		<link rel="stylesheet" href="../public/node_modules/element/element.css">
		<link rel="stylesheet" href="../public/node_modules/element/icon.css">
		<link rel="stylesheet" href="../public/css/public-pc.css">
		<link rel="stylesheet" href="../public/css/style-pc.css">
		<link rel="stylesheet" href="../public/js/swiper-bundle.min.css" />
		<link rel="stylesheet" href="../public/css/animate.min.css">
		<script src="../public/js/jquery.js"></script>
		<script src="../public/js/jquery.scrollAnimations.min.js"></script>
		<script src="../public/js/popper.min.js"></script>
	</head>

	<body>
		<div id="app">
			<!-- banner内容 -->
			<div class="show-pc">
				<div class="about-head">
					<img src="../public/img/aboutBan.jpg" scale-animate="1" alt="" class="about-head-img" />

					<div class="about-head-text" data-animation="fadeInDown">
						<div class="banner-head-title">关于我们</div>
						<div class="banner-head-text">ABOUT US</div>
					</div>
					<div class="banner-sel" data-animation="bounceInLeft">
						<div class="pageContent sel-box">
							<div class="sel-item">
								<a href="/psk-web-html/about/about.html">
									<div class="sel-item-text ">
										关于我们
									</div>
								</a>
								<a href="/psk-web-html/corporateCulture/corporateCulture.html">
									<div class="sel-item-text ">
										企业文化
									</div>
								</a>
								<a href="/psk-web-html/EnterpriseAdvantages/EnterpriseAdvantages.html">
									<div class="sel-item-text ">
										企业优势
									</div>
								</a>
								<div class="sel-item-text active">
									资质荣誉
								</div>

							</div>
							<div class="sel-item-right">
								<div class="home-img-box">
									<img src="../public/img/首页home.png" alt="" class="home-img" />
								</div>
								<div class="home-box-text">
									<a href="/psk-web-html/index/index.html">首页</a>
								</div>
								<div class="home-box-text">></div>
								<div class="home-box-text">关于我们</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="show-wap">
				<div class="about-head-wap">
					<img src="../public/img/aboutBan.jpg" scale-animate="1" alt="" class="about-head-img" />
					<div class="about-head-text" data-animation="fadeInDown">
						<div class="banner-head-title-wap ">关于我们</div>
						<div class="banner-head-text-wap">ABOUT US</div>
					</div>
					<div class="banner-sel-wap" data-animation="bounceInLeft">
						<div class="pageContent sel-box">
							<div class="sel-item">
								<a href="/psk-web-html/about/about.html">
									<div class="sel-item-text-wap ">

										关于我们
									</div>
								</a>
								<a href="/psk-web-html/corporateCulture/corporateCulture.html">
									<div class="sel-item-text-wap ">
										企业文化
									</div>
								</a>
								<a href="/psk-web-html/EnterpriseAdvantages/EnterpriseAdvantages.html">
									<div class="sel-item-text-wap ">
										企业优势
									</div>
								</a>
								<a href="/psk-web-html/QualificationandHonor/QualificationandHonor.html">
									<div class="sel-item-text-wap active">
										资质荣誉
									</div>
								</a>
							</div>




						</div>
					</div>
				</div>
			</div>

			<!-- 内容 -->
			<div class="show-pc">
				<div class="qualifications-content">
					<div class="pageContent qualifications-box">
						<div class="qualifications-letf" data-animation="wobble">
							<div class="qualifications-one qualifications-active">
								<div>公司荣誉</div>
								<div class="qualifications-text"></div>
							</div>
							<div class="qualifications-two">
								<div>公司专利</div>
								<div class="qualifications-text"></div>
							</div>
						</div>
						<div class="qualifications-right">
							<!-- 公司荣誉 -->
							<div class="qualifications-img-box ">
								<div class="swiper">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">重庆市知识产权优势企业</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">重庆市“专精特新”企业</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text"> 创新基金重点培育企业1</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">创新基金重点培育企业2</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">创新基金重点培育企业2</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">创新基金重点培育企业2</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">创新基金重点培育企业2</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">创新基金重点培育企业2</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">创新基金重点培育企业2</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">创新基金重点培育企业2</div>
										</div>

									</div>
								</div>
							</div>
							<!-- 公司专利 -->
							<div class="qualifications-img-box" style="display: none;">
								<div class="swiperTwo">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">公司专利</div>
										</div>
										<div class="swiper-slide">
											<img src="../public/img/资质图片.png" alt="资质证书"
												class="qualifications-item-img" />
											<div class="qualifications-img-text">公司专利</div>
										</div>

									</div>
								</div>
							</div>


							<!-- 右边切换 -->
							<div class="swiper qualifications-sel-box ">
								<div class="qualifications-arrow">
									<div class="arrow-img swiper-button-prev">
										<i class="el-icon-arrow-up el-icon-arrow" style="font-size: 1vw;"></i>
									</div>
								</div>

								<div class="qualifications-right-content">
									<div class="qualifications-content-text qualifications-text-active">
										重庆市知识产权优势企业
									</div>
									<div class="qualifications-content-text">
										重庆市“专精特新”企业
									</div>
									<div class="qualifications-content-text">

										创新基金重点培育企业1
									</div>
									<div class="qualifications-content-text">
										国家知识产权优势企业2
									</div>
								</div>
								<!-- 公司专利 -->
								<div class="qualifications-right-content" style="display: none;">
									<div class="qualifications-content-text qualifications-text-active">
										公司专利
									</div>
									<div class="qualifications-content-text">
										公司专利
									</div>
								</div>



								<div class="qualifications-arrow">
									<div class="arrow-img swiper-button-next">
										<i class="el-icon-arrow-down el-icon-arrow" style="font-size: 1vw;"></i>
									</div>
								</div>

							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="show-wap">
				<div class="pageContent">
					<!-- 切换按钮 -->
					<div class="qualifications-letf-wap" data-animation="wobble">
					  <div class="qualifications-one-wap active">
					    <div class="one-wap-text qualifications-active-wap">公司荣誉</div>
					  </div>
					  <div class="qualifications-one-wap">
					    <div class="one-wap-text">公司专利</div>
					  </div>
					</div>
					
					<!-- 公司荣誉轮播 -->
					<div class="qualifications-wap show">
					  <el-carousel trigger="click" height="260px" indicator-position="none">
					    <el-carousel-item v-for="item in 4" :key="item">
					      <img src="../public/img/资质图片.png" alt="资质证书" class="qualifications-item-img-wap" />
					      <div class="qualifications-img-text-wap">重庆市知识产权优势企业</div>
					    </el-carousel-item>
					  </el-carousel>
					</div>
					
					<!-- 公司专利轮播 -->
					<div class="qualifications-wap">
					  <el-carousel trigger="click" height="260px" indicator-position="none">
					    <el-carousel-item v-for="item in 2" :key="item">
					      <img src="../public/img/资质图片.png" alt="资质证书" class="qualifications-item-img-wap" />
					      <div class="qualifications-img-text-wap">公司专利公司专利</div>
					    </el-carousel-item>
					  </el-carousel>
					</div>


				</div>
			</div>




		</div>
	</body>
	<script type="text/javascript" src="../public/node_modules/vue/vue.js"></script>
	<script type="text/javascript" src="../public/node_modules/element/element.js"></script>
	<script type="text/javascript" src="../public/js/pubilc.js"></script>
	<script type="text/javascript" src="../public/js/swiper-bundle.min.js"></script>
	<script type="text/javascript" src="../public/js/pubilc-wap.js"></script>

	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					dialogTableVisible: false,

				}
			},
			methods: {

			}

		});
	</script>
	<!-- pc -->
	<script>
		$(document).ready(function() {
			let currentSwiper = null;
			let honorSwiper = null;
			let patentSwiper = null;

			// 更新右侧文字高亮状态
			function updateQualificationsText(index) {
				const $activeContent = $('.qualifications-right-content:visible');
				if ($activeContent.length === 0) return;

				$activeContent.find('.qualifications-content-text')
					.removeClass('qualifications-text-active')
					.eq(index)
					.addClass('qualifications-text-active');
			}


			// 初始化公司荣誉 Swiper
			function initHonorSwiper() {
				if (honorSwiper === null) {
					honorSwiper = new Swiper('.swiper', {
						effect: 'coverflow',
						slidesPerView: $('.swiper .swiper-slide').length,
						centeredSlides: true,
						grabCursor: true,
						allowTouchMove: true,
						slideToClickedSlide: true,
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
						coverflowEffect: {
							rotate: 20,
							stretch: 0,
							depth: 100,
							modifier: 1,
							slideShadows: false,
						},
						on: {
							init: function() {
								updateQualificationsText(this.realIndex);
							},
							slideChange: function() {
								updateQualificationsText(this.realIndex);
							}
						}
					});
				}
				currentSwiper = honorSwiper;
				updateQualificationsText(honorSwiper.realIndex);
			}

			// 初始化公司专利 Swiper
			function initPatentSwiper() {
				if (patentSwiper === null) {
					patentSwiper = new Swiper('.swiperTwo', {
						effect: 'coverflow',
						slidesPerView: $('.swiperTwo .swiper-slide').length,
						centeredSlides: true,
						grabCursor: true,
						allowTouchMove: true,
						slideToClickedSlide: true,
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
						coverflowEffect: {
							rotate: 20,
							stretch: 0,
							depth: 100,
							modifier: 1,
							slideShadows: false,
						},
						on: {
							init: function() {
								updateQualificationsText(this.realIndex);
							},
							slideChange: function() {
								updateQualificationsText(this.realIndex);
							}
						}
					});
				}
				currentSwiper = patentSwiper;
				updateQualificationsText(patentSwiper.realIndex);
			}

			// 销毁当前 Swiper 实例
			function destroyCurrentSwiper() {
				if (currentSwiper !== null) {
					currentSwiper.destroy();
					currentSwiper = null;
				}
			}
			// 左侧菜单点击切换
			$('.qualifications-letf > div').click(function() {
				$('.qualifications-letf > div').removeClass('qualifications-active');
				$(this).addClass('qualifications-active');

				const text = $(this).find('div:first').text().trim();

				// // 隐藏所有内容区域
				$('.qualifications-img-box').hide();
				$('.qualifications-right-content').hide();

				// 销毁当前 Swiper 实例
				// destroyCurrentSwiper();

				// 显示对应内容并初始化新 Swiper
				if (text === '公司荣誉') {
					$('.qualifications-img-box').eq(0).show();
					$('.qualifications-right-content').eq(0).show();
				} else if (text === '公司专利') {
					$('.qualifications-img-box').eq(1).show();
					$('.qualifications-right-content').eq(1).show();
					initPatentSwiper(); // 重新初始化专利 Swiper
				}
			});
			initHonorSwiper(); // 重新初始化荣誉 Swiper

			// 点击右侧文字切换 slide
			$('.qualifications-content-text').on('click', function() {
				const $parent = $(this).parent();
				const index = $(this).index();

				if ($parent.is(':visible')) {
					if ($parent.index() === 0 && honorSwiper) {
						honorSwiper.slideTo(index);
					} else if ($parent.index() === 1 && patentSwiper) {
						patentSwiper.slideTo(index);
					}

					$parent.find('.qualifications-content-text')
						.removeClass('qualifications-text-active')
						.eq(index)
						.addClass('qualifications-text-active');
				}
			});

			// 页面加载默认触发一次
			$('.qualifications-letf > div:first').trigger('click');
		});
	</script>
	<!-- wap -->


</html>